<template>
	<div>
		<div class="banner-box"><div class="banner-box-title">GQICT在线考试系统</div></div>
		<div style="width: 100%; margin-top:  10px;">
			<el-row :gutter="12">
				<el-col :span="8">
					<el-card shadow="hover">
						<img src="../../assets/template-blue.png" />
						<div style="height: 100px;">
							<span type="text">随机练习题目</span>
							<el-button type="primary" round @click="doexam(1)" disabled>暂未开放</el-button>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<img src="../../assets/text-blue.png" />
						<div style="height: 100px;">
							<span type="text">参加考试</span>
							<el-button type="danger" round @click="doexam(2)">开始</el-button>
						</div>
					</el-card>
				</el-col>
				<el-col :span="8">
					<el-card shadow="hover">
						<img src="../../assets/form.png" style="width: 140px;" />
						<div style="height: 100px;">
							<span type="text">查询成绩</span>
							<el-button type="info" round @click="doexam(3)">进入</el-button>
						</div>
					</el-card>
				</el-col>
			</el-row>
		</div>

		<LoginRegister :dialogVisible="centerDialogVisible" @onVisible="onVisibleChange"></LoginRegister>
	</div>
</template>

<script>
import { getToken, setToken } from '@/utils/auth';
import LoginRegister from '../../components/LoginRegister.vue';
export default {
	data() {
		return {
			currentDate: new Date(),
			centerDialogVisible: false
		};
	},
	components: {
		LoginRegister
	},
	methods: {
		doexam(code) {
			//1:是随机练习2：参加考试3:成绩查询
			if(getToken()){
				if (code == 1) {
				} else if (code == 2) {
					this.$router.push('/exam');
				} else if (code == 3) {
					this.$router.push('/cxksexam');
				}
			}else{
				this.noInside()
			}
		},
		noInside(code) {
			this.centerDialogVisible = true;
		},
		onVisibleChange(val) {
			//外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
			this.centerDialogVisible = val;
		}
	}
};
</script>

<style>
.banner-box {
	width: 100%;
	height: 300px;
	margin: 68px auto 0;
	background: url('../../assets/banner-wechat-ks.jpg') no-repeat center;
}

.banner-box-title {
	font-size: 60px;
	font-weight: bold;
	color: #fff;
	line-height: 1;
	letter-spacing: 4px;
	text-align: center;
	padding-top: 120px;
}
</style>
